<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>漂浮的图片</title>
    <style>
        img{
            width: 100px;
            height: 100px;
        }
        #outer{
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="outer">
        <img src="../imgs/heart.gif" alt="">
    </div>

    <script>
        let div = document.getElementById("outer");

        let x = 10;
        let y = 10;

        let leftX = 0;
        let topY = 0;

        //文档可见区域的高度
        let h = document.documentElement.clientHeight;

        //文档可见区域的宽度
        let w = document.body.clientWidth;

        //div的高度
        let divH = div.offsetHeight;
        let divW = div.offsetWidth;

        function tt(){
            leftX+=x;
            topY+=y;//topY = topY + y;

            if(divH+topY>=h || topY<=0){
                y*=-1;//y = y * -1;
            }
            if(divW + leftX>=w || leftX<=0){
                x*=-1;
            }

            div.style.left=leftX+"px";
            div.style.top=topY+"px";
        }

         let dt = setInterval(tt,50);

         div.onmouseover=function(){
             clearInterval(dt);
         }

         div.onmouseleave=function(){
            dt = setInterval(tt,50);
         }
    </script>
</body>
</html>